<template>
	<view class="content1">
		<view class="imgv">
			<image class="logo-img" src="@/static/img/icon_@3x.png"></image>
		</view>

		<view class="input-group">
			<view class="input-row border">
				<m-input type="text"  clearable v-model="username" placeholder="请输入账号"></m-input>
			</view>
			<view class="input-row border">
				<m-input type="password"  displayable v-model="password" placeholder="请输入密码"></m-input>
			</view>
		</view>

		<view class="btn-row" >
			<button type="primary" class="primary" :loading="loginBtnLoading" @tap="loginByPwd">登录</button>
		</view>
		<view class="action-row" >
			<navigator url="../reg/reg">没有账号？</navigator>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import mInput from '../../components/m-input.vue'
	import {
		univerifyLogin,
		univerifyErrorHandler
	} from '@/common/univerify.js'
	import {
		getDeviceUUID
	} from '@/common/utils.js'

	const captchaOptions = {
		deviceId: getDeviceUUID(),
		scene: 'login'
	}

	export default {
		components: {
			mInput
		},
		data() {
			return {
				platform: uni.getSystemInfoSync().platform,
				loginType: '1',
				mobile: '',
				email: '',
				code: '',
				emcode: '',
				value: '1',
				hasProvider: false,
				username: '',
				password: '',
				positionTop: 0,
				isDevtools: false,
				codeDuration: 0,
				loginBtnLoading: false,
				hasAppleLogin: false,
				needCaptcha: uni.getStorageSync('uni-needCaptcha'),
				captchaing: false,
				captchaBase64: '',
				captchaText: ''
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'univerifyErrorMsg', 'hideUniverify']),
		onLoad() {
			// #ifdef APP-PLUS
			plus.oauth.getServices((services) => {});
			// #endif
			if (this.needCaptcha) {
				this.captcha('createCaptcha')
			}
		},

		methods: {
			...mapMutations(['login']),
			thisload() {
				this.$api.user.checkToken().then(res => {
					if (res.code == 200) {
						this.toMain(res.data.username);
					}
				}).catch(err => {
					console.error('Token验证失败:', err)
					uni.showModal({
						content: JSON.stringify(err),
						showCancel: false
					})
				})
			},
			initPosition() {
				/**
				 * 使用 absolute 定位，并且设置 bottom 值进行定位。软键盘弹出时，底部会因为窗口变化而被顶上来。
				 * 反向使用 top 进行定位，可以避免此问题。
				 */
				this.positionTop = uni.getSystemInfoSync().windowHeight - 120;
			},

			async loginByPwd() {
				if (this.username.length < 3) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 3 个字符'
					});
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 6 个字符'
					});
					return;
				}
				const data = {
					username: this.username,
					password: this.password,
					//captcha: this.captchaText,
					//...captchaOptions
				};
				this.loginBtnLoading = true
				// 使用callFunction通用方法处理密码登录
				this.$api.callFunction({
					name: 'user-center',
					data: {
						action: 'login',
						data: data
					}
				}).then(res => {

					if (res.code === 200) {
            console.log("login页面666",res)
						this.needCaptcha = false;
						uni.setStorageSync('username', res.data.username)
						uni.setStorageSync('uni-needCaptcha', this.needCaptcha)
            uni.setStorageSync('captchaBase64', this.captchaBase64)
            uni.setStorageSync('uid', res.data.id)
						uni.setStorageSync('uni_id_token', res.data.token)
						uni.setStorageSync('uni_id_has_pwd', true)
						this.toMain(this.username);
					} else {
						uni.showModal({
							content: res.message,
							showCancel: false
						})
						this.needCaptcha = res.needCaptcha;
						uni.setStorageSync('uni-needCaptcha', this.needCaptcha)
						if (this.needCaptcha) {
							this.captcha('createCaptcha')
						}
					}
				}).catch(err => {
          console.log("login页面异常",err)
					console.error('登录失败66:', err)
					uni.showModal({
						content: JSON.stringify(err),
						showCancel: false
					})
				}).finally(() => {
					this.loginBtnLoading = false
				})
			},

			toMain(userName) {
				this.login(userName);
				/**
				 * 强制登录时使用reLaunch方式跳转过来
				 * 返回首页也使用reLaunch方式
				 */
				uni.reLaunch({
					url: '../index/index',
				});
			},
			toLogin(value) {
				if (value === '2' || value === '1' || value === '0' || value === '3') {
					this.value = value
					this.loginType = value
					return;
				}
			},

			async captcha(action, args) {
				if (this.captchaing) return;

				// 验证不loading
				this.captchaing = true;

				let {
					result: res
				} = await uniCloud.callFunction({
					name: 'user-center',
					data: {
						action,
						params: {
							...captchaOptions,
							...args
						}
					}
				})
				this.captchaing = false;
				if (res.code == 200) {
					this.captchaBase64 = res.captchaBase64
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 1000
					})
				}
				return res;
			}

		},
		onReady() {
			this.initPosition();
			let uniIdToken = uni.getStorageSync('uni_id_token')
			// if (uniIdToken) {
			// 	this.thisload()
			// }
			// #ifdef MP-WEIXIN
			this.isDevtools = uni.getSystemInfoSync().platform === 'devtools';
			// #endif
		}
	}
</script>

<style>
	.content1 {
		display: flex;
		flex: 1;
		flex-direction: column;
		background: #FFFFFF;
		width: 100%;
		overflow-x: hidden;
	}

	.imgv {

		width: 100%;
	
		margin: 0 auto;
		display: flex;
		justify-self: center;
		align-items: center;
		margin: 80rpx 0;
	}

	.logo-img {
		width: 120rpx;
		height: 120rpx;
		display: inline-block;
		border-radius: 10px;
		margin: 0 auto;
	}

	.input-group {
		background-color: #ffffff;
		
		position: relative;
		width: 610rpx;
	
		margin: 0 auto;
	}

	.input-group::before {
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #FFFFFF;
	}

	.input-group::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.input-row {
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		position: relative;
		width: 610rpx;
		max-width: 460px;
		height: 51.5px;
		line-height: 40px;
	}

	.input-row.border::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0px;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.btn-row {
		margin-top: 0px;
		border-radius: 4px;
	}

	button.primary {
		margin-top: 30rpx;
		max-width: 460px;
		background: #3B88F5;
		width: 610rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 15px;
		line-height: 45px;
		max-height: 45px;
		letter-spacing: 0px;
		text-align: center;
		
	}

	button.primarywx {
		margin-top: 30rpx;

		max-width: 460px;
		background: #53B821;
		width: 610rpx;
		color: #FFFFFF;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 15px;
		line-height: 45px;
		max-height: 45px;
		letter-spacing: 0px;
		text-align: center;
	
	}

	.action-row {
		padding-left: 350rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		margin-left: auto;
		
	}

	.action-row navigator {
		color: #999999;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 12px;
		line-height: normal;
		letter-spacing: 0px;
		text-align: right;
	}

	.oauth-row {
		display: flex;
		flex-direction: row;
		/* align-items: center; */
		justify-content: space-around;
		flex-wrap: wrap;
		position: absolute;
		top: 0;
		left: 0;
		margin: 0 140rpx;
		/* width: 100%; */
	}



	.oauth-image {
		position: relative;
		width: 98rpx;
		height: 98rpx;
		/* border: 1px solid #dddddd;
		border-radius: 50px;
		background-color: #ffffff; */
	}

	.oauth-image image {
		width: 98rpx;
		height: 98rpx;
		margin: 20rpx;
	}

	.oauth-image button {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}


</style>